<template>
	<view class="page-live">
		<!-- 头部 开始 -->
		<nav-bar>
			<block slot="content">
				<button class="cu-btn round custom-head" @click="toSearch">搜索你想看的内容</button>
			</block>
		</nav-bar>
		<!-- 头部 结束 -->
		<scroll-view scroll-y="true" @scrolltolower="scrolltolower" :style="{height: `calc(100% - ${CustomBar}px)`}">
			<view class="cu-card custom-card-live grid col-2 padding-lr-xs">
				<block v-for="(item,index) of list" :key="index">
					<view class="content-list padding-lr-xs padding-bottom-sm" @click="showDetail(item)">
						<view class="content-item bg-white">
							<view class="img-box-bg">
								<image :src="item.img" mode="aspectFill" style="height:100%" />
							</view>
							<!-- <view class="bg-shadeTop custom padding-lr-sm padding-top padding-bottom-xl flex text-xs" v-if="type==='live'">
								<view>
									<text class="cuIcon cuIcon-all"/>
									<text class="margin-left-xs">
										直播中 {{item.play_num}}人观看
									</text>
								</view>
							</view> -->
							<view class="bg-shadeBottom custom padding-lr-sm padding-bottom padding-top-xl flex flex-direction justify-between">
								<view class="text-sm text-cut" style="min-width: 0;">{{item.title}}</view>
								<view class="flex justify-between align-center margin-top-sm text-xs">
									<view class="flex justify-start align-center">
										<image class="cu-avatar custom round margin-right-xs" :src="item.avatar"/>
										<view>{{item.nickname}}</view>
									</view>
									<view class="flex justify-start align-center">
										<view></view>
										<view class="margin-left-xs">{{item.views_count}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view v-if="isEmpty" class="flex justify-center">
				<text class="text-red">暂无搜索结果</text>
			</view>
		</scroll-view>
		<!-- 内容 结束 -->
		<!-- <h-top-tip ref="hTip" /> -->
	</view>
</template>

<script>
	import HTopTip from "@/components/HTopTip"
	export default {
		data() {
			return {
				list: [],
				query: {
					size: 6,
					page: 1,
					type:1
				},
				isMore:false,
				isEmpty:false
			}
		},
		components:{
			HTopTip
		},
		methods: {
			async getList() {
				let {
					data
				} = await this.waitingLoading(this.$h.api.videoModel.getSearch)(this.query)
				if(data.data){
					this.isMore=data.data.length===this.query.size
					if (this.query.page===1) {
						this.list = [...data.data]
					} else {
						this.list = [...this.list, ...data.data]
					}
				}
			},
			scrolltolower() {
				if(this.isMore){
					this.query.page++
					this.getList()
				}
			},
			toSearch() {
				this.$h.router.push({
					path: '/pages/home/search',
					params:{
						type:"admin_video"
					}
				})
			},
			showDetail({id}) {
				this.$h.router.push({
					path: "/pages/video/adminVideo/videoDetail",
					params: {
						id
					}
				})
			}
		},
		onLoad() {
			this.getList()
		},
		onPullDownRefresh() {
			this.query.page=1
			uni.showNavigationBarLoading()
			this.getList().then(() => {
				uni.stopPullDownRefresh()
				uni.hideNavigationBarLoading()
				this.$h.toast('已加载最新数据')
			})
		}
	}
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.page-live {
		height: 100%;

		.cu-btn.custom-head {
			width: 500rpx;
			color: #38383A;
			font-size: 28rpx;
		}

		.cu-card {
			padding-top: 20rpx;

			.cu-item.custom-margin {
				margin: 20rpx;
				overflow: hidden;
			}
		}

		.content-list {
			height: 520rpx;

			.content-item {
				width: 100%;
				height: 100%;
				border-radius: 14rpx;
				overflow: hidden;
				position: relative;

				.cu-avatar.custom {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.cu-card.custom-card-short,
		.cu-card.custom-card-live {
			padding-top: 40rpx;
		}

	}
</style>
